<template>
    <view class="container">
        <back />
        <view class="gradientBox header">
            {{ jounalData.updateTime }}
            <image
                class="icon"
                :src="jounalData.weather_path"
                mode="scaleToFill"
                @click="changeIcon('weather')"
            />
        </view>
        <view class="publishBox">
            <view class="publishLayout">
                <view class="iconsBox">
                    <view class="item">
                        <image
                            class="happenicon"
                            :src="jounalData.happen_path"
                            mode="scaleToFill"
                            @click="changeIcon('happen')"
                        />
                    </view>
                    <image
                        class="icon"
                        :src="jounalData.mood_path"
                        mode="scaleToFill"
                        @click="changeIcon('mood')"
                    />
                </view>
                <view class="inpLayout">
                    <view class="label">Title *</view>
                    <view class="text">
                        {{jounalData.title}}
                    </view>
                </view>
                <view class="tareaLayout">
                    <view class="label">Content *</view>
                    <view class="content">
                        {{jounalData.content}}
                    </view>
                </view>
                <!-- <view
                    class="complete"
                    hover-class="hoverBtn"
                    @click="completeCli"
                >
                    <image
                        src="@/static/community/complete.png"
                        class="icon"
                        mode="scaleToFill"
                    />
                    AddJournal
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
import back from '@/pages_second/components/back/back.vue'
import dayjs from 'dayjs'
export default {
  components: { back },
    data(){
        return {
            jounalData:{}
        }
    },
    methods:{

    },
    onLoad(options){
        const {jounalData} = options
        this.jounalData = JSON.parse(jounalData)
        this.jounalData.updateTime = dayjs(this.jounalData.updateTime).format('YYYY-MM-DD HH:mm:ss')
    },
}
</script>

<style lang="scss" scoped>
.header {
    padding-top: 200rpx;
    font-size: 36rpx;
    font-weight: bolder;
    color: $blueTheme;
    text-align: center;
    position: relative;

    .icon {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 200rpx;
        right: 120rpx;
        animation: a2 2s linear infinite;
        @keyframes a2 {
            0% {
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(0.8);
            }
        }
    }
}
.publishBox {
    padding: 48rpx;
    .publishLayout {
        padding: 48rpx;
        background: #fff;
        box-shadow: 2rpx 4rpx 4rpx #ccc;
        border-radius: 24rpx;
        .iconsBox {
            position: relative;
            .item {
                text-align: center;
                .happenicon {
                    width: 33vw;
                    height: 33vw;
                }
            }
            .icon {
                width: 48rpx;
                height: 48rpx;
                position: absolute;
                top: 28vw;
                right: 0;
                animation: a 2s linear infinite;
                @keyframes a {
                    0% {
                        transform: rotate(0reg);
                    }
                    25% {
                        transform: rotate(20deg);
                    }
                    50% {
                        transform: rotate(0deg);
                    }
                    75% {
                        transform: rotate(-20deg);
                    }
                    100% {
                        transform: rotate(0deg);
                    }
                }
            }
        }

        .inpLayout {
            margin: 36rpx 0;
            .text{
                padding: 20rpx;
                color: #000;
                font-size: 32rpx;
            }
        }
        .content{
            color: #0c0c0c;
            line-height: 46rpx;
            padding: 20rpx;
            font-size: 28rpx;
        }

        .label {
            font-size: 34rpx;
            font-weight: bolder;
            padding-left: 8rpx;
        }
        .input {
            height: 88rpx;
            line-height: 88rpx;
            background: #f3f5f5;
            padding: 0 16rpx;
            margin-top: 16rpx;
            border-radius: 24rpx;
        }

        .textarea {
            background: #f3f5f5;
            width: 100%;
            border-radius: 24rpx;
            padding: 16rpx 24rpx;
            box-sizing: border-box;
            margin-top: 16rpx;
            
        }
        .complete {
            background: #e7e3f8;
            margin-top: 30rpx;
            border-radius: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16rpx 0;
            font-size: 32rpx;
            font-weight: 600;
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 8rpx;
            }
        }
    }
}
</style>
<style>
page {
    background-color: #f3f5f6;
}
</style>